{extend name="public/container"}
{block name="content"}
<style type="text/css">
    .order-price span {
        font-size: 12px;
        color: #999;
    }
    .order-price span:not(:last-child) {
        margin-right: 20px;
    }
    .order-price span b {
        color: #FF0000;
        font-size: 17px;
        margin-right: 2px;
    }
</style>
<div id="myApp" v-cloak>
    <div class="douxue-filter padding-10 mb-20" style="margin-bottom:20px">
        <el-form :inline="true" :model="where" size="mini" class="flex">
            <div class="flex flex-between">
                <el-form-item label="发生日期">
                    <el-date-picker
                        v-model="where.date_time"
                        type="daterange"
                        align="right"
                        value-format="yyyy-MM-dd"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>
				
				<el-form-item label="发生类型">
					<el-select v-model="where.stype" clearable placeholder="发生类型">
					    <el-option :label="item.val" :value="item.key" v-for="(item,key) in stypes" :key="key"></el-option>
					</el-select>
				</el-form-item>
				
                <el-form-item>
                    <el-input v-model="where.keyword" placeholder="手机号/姓名">
                        <el-button slot="append" size="small" type="success" @click="doLoadRows(1)" icon="el-icon-search"></el-button>
                    </el-input>
                </el-form-item>
            </div>
        </el-form>
    </div>

    <div class="padding-10">
        <el-table
            :data="rows"
            style="width: 100%"
            v-loading="loading"
            element-loading-text="加载中"
            element-loading-spinner="el-icon-loading"
            size="mini">
            <el-table-column
                prop="nickname"
                label="用户昵称"
                align="left">
            </el-table-column>

            <el-table-column
                prop="mobile"
                label="手机号"
                align="left">
            </el-table-column>

            <el-table-column
                prop="amt"
                label="发生数额"
                align="left">
                <template slot-scope="scope">
                    <div class="order-price flex">
                        <el-link v-if="scope.row.amt>0" :underline="false" type="danger">{{ scope.row.amt }}</el-link>
                        <el-link v-if="scope.row.amt<0" :underline="false" type="success">{{ scope.row.amt }}</el-link>
                    </div>
                </template>
            </el-table-column>

            <el-table-column
                prop="balance"
                label="当期余额"
                align="left">
            </el-table-column>

            <el-table-column
                prop="stype_display"
                label="发生类型"
                align="left">
            </el-table-column>

            <el-table-column
                prop="remark"
                label="备注"
                width="130"
                align="left">
                <template slot-scope="scope">
                    <template v-if="scope.row.remark">
                        <el-tooltip class="item" effect="light" :content="scope.row.remark" placement="bottom-start">
                            <i class="el-icon-tickets"></i>
                        </el-tooltip>
                    </template>
                    <template v-else>-</template>
                </template>
            </el-table-column>

            <el-table-column
                prop="create_time"
                label="发生时间"
                width="160"
                align="left">
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                small
                :hide-on-single-page="true"
                layout="prev, pager, next"
                :total="rowsCount"
                :page-size="where.limit"
                @current-change="doLoadRows">
            </el-pagination>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>
    var my = new Vue({
        el: "#myApp",
        data(){
            return {
                rowsCount: 0,
                rows: [],
                where: {
                    keyword: '',
                    stype:'',
                    date_time:'',
                    page:1,
                    limit:pageSize,

                },
				stypes: [],
                pickerOptions: {
                    shortcuts: [
                        {
                            text: '最近一周',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '最近一个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '最近三个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                picker.$emit('pick', [start, end]);
                            }
                        }
                    ]
                },
                loading:false,
				showFahuo: false,
				fahuoForm: {
					id: 0,
					goods_name: '',
					nums: 0,
					address_display: '',
					logistic_no: ''
				}
            }
        },
        methods: {
            doLoadRows (page) {
                this.loading = true
                this.where.page  = page || 1
                axios.get(Url({a:'get_list' , q:this.where}))
                    .then(res => {
                        this.rows = res.data.data
                        this.rowsCount =res.data.count
                        this.loading = false
                    })
            },
			doFahuo (orderId) {
				this.showFahuo = true
				axios.get(Url({c:'finance.order',a:'exchangeOrderInfo' , q:{order_id:orderId}})).then(res => {
				    this.fahuoForm = res.data.data.outer
				}).catch(_ => {
				    this.$message.error('发生错误')
				})
			},
			confirmFahuo() {
				if ( !this.fahuoForm.logistic_no ) {
					return this.$message.error('物流单号必填！')
				}
				this.$confirm('请仔细检查物流单号。确认无误并发货吗?').then(_ => {
				    axios.post(Url({c:'finance.order',a:'confirmExchangeOrderFahuo'}) , this.fahuoForm).then(res => {
						if ( res.data.code === 200 ) {
							this.$message.success('发货成功！2秒后页面自动刷新')
							return setTimeout(function(){
								window.location.reload()
							},2000)
						}
						return this.$message.error(res.data.msg)
				    }).catch(_ => {
				        this.$message.error('操作失败')
				    })
				}).catch(_ => {})
			},
			doLoadOrderTypes() {
				axios.get(Url({a:'get_attr' , q:{name:'stype'}})).then(res => {
				    this.stypes = res.data.data
				}).catch(_ => {
				    this.$message.error('发生错误')
				})
			}
        },
        mounted(){
            this.doLoadRows()
			this.doLoadOrderTypes()
        }
    })
</script>
{/block}